<!--
  * @Description: 修改密码
  * @Author: rcc
  * @Date: 2024-08-16 10:46:30
  * @FilePath: /rc-recruitment/pages_site/pages/password/password.vue
-->

<template>
  <view class="p-h24">
    <RcNavigation title="修改密码" border />

    <view class="flex m-t50">
      <text class="text-500-430">当前绑定手机号：</text>
      <text class="flex-1 text-700-130">{{ userInfo.mobile }}</text>
      <text
        class="send-button flex-c p-h10 text-400-528"
        @click="sendCode(userInfo.mobile, 4)">
        {{ codeText }}
      </text>
    </view>

    <view class="card flex m-t20">
      <image class="square-40" src="@/static/images/public/phone.png" />
      <view class="line" />
      <input
        v-model="formData.code"
        class="flex-1"
        type="text"
        placeholder="请输入短信验证码" />
    </view>
    <view class="card flex">
      <image class="square-40" src="@/static/images/public/safety.png" />
      <view class="line" />
      <input
        v-model="formData.newpassword"
        class="flex-1"
        type="text"
        :password="isPwd1"
        placeholder="请输入新密码" />
      <image
        v-if="isPwd1"
        class="square-42"
        src="@/static/images/public/show.png"
        @click="isPwd1 = !isPwd1" />
      <image
        v-else
        class="square-42"
        src="@/static/images/public/hide.png"
        @click="isPwd1 = !isPwd1" />
    </view>
    <view class="card flex">
      <image class="square-40" src="@/static/images/public/safety.png" />
      <view class="line" />
      <input
        v-model="formData.newpasswords"
        class="flex-1"
        type="text"
        :password="isPwd2"
        placeholder="确认密码" />
      <image
        v-if="isPwd2"
        class="square-42"
        src="@/static/images/public/show.png"
        @click="isPwd2 = !isPwd2" />
      <image
        v-else
        class="square-42"
        src="@/static/images/public/hide.png"
        @click="isPwd2 = !isPwd2" />
    </view>

    <view class="m-t32 text-400-428">请输入6-16位字母或数字区分大小写</view>

    <view class="flex-c">
      <RcButton
        text="保存"
        :width="340"
        :top="100"
        @click="submit" />
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { storeToRefs } from 'pinia'

  import useCode from '@/hooks/use-code.ts'
  import { useUserStore } from '@/stores/user.ts'

  import RcButton from '@/components/button.vue'
  import RcNavigation from '@/components/navigation.vue'

  const userStore = useUserStore()
  const { codeText, sendCode } = useCode()
  const { userInfo } = storeToRefs(userStore)

  const isPwd1 = ref(true)
  const isPwd2 = ref(true)

  const isDisabled = ref(false)
  const formData = reactive({
    code: '',
    newpassword: '',
    newpasswords: '',
  })

  /**
   * 表单验证
   *
   * @returns {boolean} 验证结果.
   */
  const formVerify = () : boolean => {
    if (isDisabled.value) return true

    if (formData.code === '') {
      uni.$u.toast('请输入短信验证码')
      return true
    }

    if (formData.newpassword === '') {
      uni.$u.toast('请输入新密码')
      return true
    }

    if (formData.newpasswords === '') {
      uni.$u.toast('请确认密码')
      return true
    }

    if (formData.newpassword !== formData.newpasswords) {
      uni.$u.toast('密码输入不一致')
      return true
    }

    return false
  }

  /**
   * 表单提交
   */
  const submit = async () => {
    if (formVerify()) return

    isDisabled.value = true
    uni.showLoading({ title: '加载中...', mask: true })

    const data = {
      ...formData,
      mobile: userInfo.value.mobile,
    }

    const res = await uni.$u.post('/user/resetpwd', data)

    if (res.code === 1) {
      userStore.getUserInfo()

      uni.hideLoading()
      uni.navigateBack()
    } else {
      uni.$u.toast(res.msg)
    }

    isDisabled.value = false
  }
</script>

<style lang="scss" scoped>
	.send-button {
		height: 60rpx;
		border-radius: 6rpx;
		border: 1rpx solid $border-color-1;
	}

	.card {
		height: 102rpx;
		border-bottom: 1rpx solid $border-color-4;

		.line {
			height: 36rpx;
			margin: 0 20rpx;
			border-left: 1rpx solid $border-color-4;
		}
	}
</style>
